<template>
	<view class="index">
		<!-- <view class="f16 c8 mb12">查询会员</view> -->
		<view class="tabs mb20">
			<view class="code f-c-c" @click="getCode">
				<text class="iconfont icon-mendianzitidaihexiaosvg mb10 c0"></text>
				<view>扫码识别</view>
			</view>
			<view class="line"></view>
			<view class="code f-c-c" @click="skip(2)">
				<text class="iconfont icon-7 mb10 c0"></text>
				<view>手机号识别</view>
			</view>
		</view>
		<u-button text="办理会员" size="large" shape="circle" color="linear-gradient(to right, #fee14f, #fdc450)"
			@click="toCreat" :customStyle="{color:'#000',fontWeight:'bold'}"></u-button>
		<!-- <view class="button tac f20 wei5 cf" @click="skip(1)">办理会员</view> -->
		<!-- 模态框 -->
		<u-modal :show="show" :negativeTop="200" :title="activeNum===1?'注册会员':'会员查询'"
			:confirmText="activeNum===1?'确定':'查询'" showCancelButton confirmColor="#FD8906" cancelColor="#999"
			@confirm="search" @cancel="show = false" @close="show = false" :closeOnClickOverlay="true" zoom>
			<view class="slot-content">
				<u--input v-model="phone" type="number" placeholder="请输入手机号" border="none"
					:customStyle="{'width':'100%','flex':1,'background': '#fafafa','padding': '10px 15px'}" clearable>
				</u--input>
			</view>
		</u-modal>
		<member ref="memberRef" @chooseMember="chooseMember" />
	</view>
</template>

<script>
	import member from '@/components/user/member.vue';
	export default {
		components: {
			member,
		},
		data() {
			return {
				activeNum: 2,
				show: false,
				title: '会员查询',
				confirmText: '查询',
				phone: '',
				subColor: uni.getStorageSync('subject_color'),
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onLoad() {
			// this.getVipList()
		},
		methods: {
			getCode() {
				var that = this
				uni.scanCode({
					onlyFromCamera: true,
					success: async function(res) {
						uni.showLoading({
							title: 'loading...'
						})
						console.log('result', res.result, res.scanType)
						if (res.result) {
							let {
								data
							} = await that.beg.request({
								url: that.api.cMember,
								data: {
									qrcode: res.result
								},
							})
							if (data && data.list.length && data.list[0].id) {
								uni.navigateTo({
									url: `/pages/home/memberManage/memberInfo?id=${data.list[0].id}`
								})
							} else {
								uni.$u.toast('暂未查到用户信息');
							}
							uni.hideLoading()
						} else {
							uni.hideLoading()
						}
					},
				});
			},
			close() {
				this.show = false
			},
			toCreat() {
				uni.navigateTo({
					url: '/pages/home/memberManage/createMenber'
				})
			},
			skip(v) {
				this.activeNum = v
				this.phone = ''
				this.show = true
			},
			async search() {
				const reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				if (this.phone) {
					this.show = false
					uni.showLoading({
						title: 'loading...'
					})
					let {
						data
					} = await this.beg.request({
						url: this.api.cMember,
						data: {
							mobile: this.phone
						},
					})
					if (data && data.list.length) {
						uni.hideLoading()
						if (data.list.length > 1) {
							this.$refs['memberRef'].open(data.list)
						} else {
							uni.navigateTo({
								url: `/pages/home/memberManage/memberInfo?id=${data.list[0].id}`
							})
						}
					} else {
						uni.hideLoading()
						uni.$u.toast('暂未查到用户信息');
					}

				} else {
					uni.$u.toast('请输入正确的手机号');
				}
			},
			chooseMember(e) {
				uni.navigateTo({
					url: `/pages/home/memberManage/memberInfo?id=${e.id}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		padding: 24rpx;
		background-color: #f6f6f6;

		.tabs {
			padding: 40rpx;
			width: 100%;
			border-radius: 20rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.iconfont {
				font-size: 70rpx;
			}

			image {
				margin-bottom: 20rpx;
				width: 160rpx;
				height: 150rpx;
			}

			.line {
				width: 3rpx;
				height: 200rpx;
				background-color: #e5ecc7;
			}
		}

		.button {
			width: 100%;
			border-radius: 60rpx;
			padding: 30rpx;
		}

		/deep/.u-modal__title {
			color: #000;
		}

		/deep/.uni-input-placeholder {
			color: grey !important;
		}

		/deep/.u-modal__content {
			display: block;
		}
	}
</style>